<script setup lang="ts">
import AppTable from "@/components/app/AppTable.vue";


function handleBtnClick(key: string, data: any[] | null) {
  console.log(key, data)
}

const handleEdit = (index: number, row: any) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: any) => {
  console.log(index, row)
}
</script>

<template>
  <AppTable
    :search-info="[
  {
    label: '题目名称',
    key: 'questionName',
    value: ''
  },
  {
    label: '题目类型',
    key: 'questionType',
    value: '',
    type: 'select',
    options: [{
      value: '0',
      label: '单选'
    }, {
      value: '1',
      label: '多选'
    }]
  }
]"

    :btn-show="{
      add: true,
      edit: true,
      delete: true,
      export:true,
      import:true
    }"
    :page-params="{
      pageNum:'pageNum',
      pageSize:'pageSize'
    }"
    api-method="get"
    api-path="/api/exam/question/listQuestion"
    @handle-btn-click="handleBtnClick"
    @multiple-selection="data => {console.log( data)}">
    <template v-slot:actionBar>
      <el-button size="small" plain type="primary">创建分类</el-button>
    </template>
    <template v-slot:tableColumn>
      <el-table-column prop="id" label="编号" width="340" align="center"/>
      <el-table-column prop="questionName" label="题目名称" align="left"/>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope?.row)">
            编辑
          </el-button>
          <el-button link type="danger" size="small"
                     @click="handleDelete(scope.$index, scope?.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </template>
  </AppTable>
</template>

<style scoped>

</style>
